<script setup lang="ts">
import type { BannerItem } from '@/types/home'
import { ref } from 'vue'

// 定义 props 接收父组件数据
defineProps<{
    list: BannerItem[]
}>()

// 当前高亮的指示点索引
const activeIndex = ref(0)

// current (轮播图页面)改变时触发
const onChange: UniHelper.SwiperOnChange = (event) => {
    // 把轮播图当前图片的索引赋值给变量
    activeIndex.value = event.detail!.current
}
</script>

<template>
    <view class="carousel">
        <swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange">
            <swiper-item v-for="item in list" :key="item.id">
                <navigator :url="item.hrefUrl" hover-class="none" class="navigator">
                    <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
                </navigator>
            </swiper-item>
        </swiper>
        <!-- 指示点 -->
        <view class="indicator">
            <text
                v-for="(item, index) in list.length"
                :key="item"
                class="dot"
                :class="{ active: index === activeIndex }"
            ></text>
        </view>
    </view>
</template>

<style lang="scss">
@import '@/components/styles/XtxSwiper.scss';
</style>
